<template>
	<view>
		<view class="ml-30 mr-30 size-28">
			请说明停诊原因：
		</view>
		<textarea v-model="content" name="" id="" cols="30" rows="10"></textarea>
		<view class="ml-30 mr-30 size-28">
			请说明停诊原因：
		</view>
		<view class="time flex">
			<view class="left" @click="date = true">
				<text style="color: #999;">{{time}}</text>
			</view>
			<view class="size-28">至</view>
			<view class="left" @click="date2 = true">
				<view style="color: #999;">{{time2}}</view>
			</view>
		</view>
		<view class="flex">
			<view></view>
			<view class="flex size-28 mt-30 mr-30">
				<!-- <view class="img"></view> -->
				<image @click="endTime = !endTime" class="img"
					:src="endTime ? '/static/s_ed.png' : '/static/noCheck.png'" mode=""></image>
				结束时间未定
			</view>
		</view>
		<view class="btn" @click="submit">
			确定
		</view>

		<u-datetime-picker confirmColor="#882027" :minDate="0" :maxDate="1786778555000" :show="date" v-model="value1"
			mode="date" @confirm="confirm" @cancel="closeDate"></u-datetime-picker>
		<u-datetime-picker confirmColor="#882027" :minDate="0" :maxDate="1786778555000" :show="date2" v-model="value1"
			mode="date" @confirm="confirm2" @cancel="closeDate"></u-datetime-picker>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				value1: Number(new Date()),
				date: false,
				time: '开始时间',
				date2: false,
				time2: '结束时间',
				endTime: false,
				content: ''
			};
		},
		methods: {
			submit() {
				if (this.time == '开始时间') {
					this.$utils.showToast('请选择开始时间')
				} else if (!this.endTime && this.time2 == '结束时间') {
					this.$utils.showToast('请选择结束时间')
				} else {
					this.$api.stopWork({
						day_time_start: this.time,
						day_time_end: this.time2,
						day_type: this.endTime ? 1 : 0,
						content: this.content
					}).then(res => {
						this.$utils.showToast(res.msg)
					})
				}
			},
			closeDate() {
				this.date = false
				this.date2 = false
			},
			confirm(e) {
				this.date = false
				console.log(e)
				// this.timestamp = e.value
				this.time = uni.$u.date(e.value, 'yyyy-mm-dd')
				console.log(this.time)
			},
			confirm2(e) {
				this.date2 = false
				console.log(e)
				// this.timestamp = e.value
				this.time2 = uni.$u.date(e.value, 'yyyy-mm-dd')
				console.log(this.time)
			},
		}
	}
</script>

<style lang="scss">
	.btn {
		position: fixed;
		left: 50%;
		transform: translateX(-50%);
		bottom: 80rpx;
	}

	textarea {
		width: 690rpx;
		height: 206rpx;
		background: #F8F8F8;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		padding: 30rpx;
		box-sizing: border-box;
		font-size: 28rpx;
		margin: 30rpx auto 0;
	}

	.img {
		width: 30rpx;
		height: 30rpx;
		background: #F1F1F1;
		margin-right: 20rpx;
		border-radius: 50%;
	}

	.time {
		width: 690rpx;
		height: 80rpx;
		background: #FFFFFF;
		border-radius: 20rpx 20rpx 20rpx 20rpx;
		opacity: 1;
		border: 2rpx solid #F1F1F1;
		margin: 30rpx auto 0;
	}

	.left {
		width: 40%;
		text-align: center;
		font-size: 28rpx;
	}
</style>
